<style type="text/css">
    img{width: 100%;
        height: 100%;}
</style>
<ul style="text-align: right;position: fixed;left: 0;right: 0;top: 0;z-index: 100;z-index: 999999;" class="layui-nav layui-nas">
    <li class="layui-nav-item">
        <div style="position: fixed;left: 20px;top: 0;" class="layui-logo"><a target="_blank" href="https://qzhlxf.1688.com/?spm=a261y.7663282.autotrace-topNav.1.aed865deBJdOUM"><img src="webapp/images/bosdes.png" style="height: 58px;width: 60px;"/> 泉州鲤城嘉源塑料制品有限公司<span class="layui-badge">官</span></a> </div>
    </li>
    <li class="layui-nav-item">
        <a onclick="javascript:REAG()" style="cursor: pointer;" >回到列表</a>
    </li>
    <li class="layui-nav-item">
        <a style="cursor: pointer;" onclick="javascript:window.location.replace($('body').attr('id')+'Logins.html');">管理中心控制台</a>
    </li>
    <li class="layui-nav-item">
        <a onclick="custom_close();" style="cursor: pointer;" >关闭程序</a>
    </li>
</ul>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
<div style="margin: 60px auto 0px auto;width: 5.333333333333333rem;height: 2.5625rem;">
    <div class="wrap">
        <div class="biger" id="biger"></div>
        <div class="imgs">
            <div class="main" id="main">
                <div class="mask" id="mask"></div>
            </div>
            <ul class="smaller" id="smaller"></ul>
        </div>
    </div>
    <div style="float: left;display: block;width: 3.1666666666666665rem;height: 2.5625rem;">
        <ul id="sas" style="height: 100%;">

        </ul>
    </div>

</div>
<script language="javascript">
    // 这个脚本是 ie6和ie7 通用的脚本
    function custom_close(){
        window.location.replace($('body').attr('id')+'index.html?END=close');
    }
</script>
<script type="text/javascript">
    function REAG() {
        window.location.replace($("body").attr("id")+"ProductList.html?md5s="+Get()["MD5"]);
    }
    $(function () {
        $.ajax({
            url: $('body').attr('id')+"ProductInfo.html",
            type: "get",
            contentType: "application/json; charset=utf-8",
            data: {
                stage:"LisgPRODUCT_NUMBER",
                sessionIDSM:Get()["PRODUCT_NUMBER"]
            },success: function (data) {
                $("#sas").empty();
               var json = JSON.parse(data);
                $("#sas").append("<li>产品编号："+json.productNumber+"<li>");
                $("#sas").append("<li>产品名称："+json.productName+"<li>");
                $("#sas").append("<p>产品属性：</p>"+"<li>"+json.productProperty+"</li>");
                var biger=document.getElementById('biger');
                var main=document.getElementById('main');
                var smaller=document.getElementById('smaller');
                var mask=document.getElementById('mask');
                var wrap=biger.parentNode;
                var imgArr=[
                    {"path":json.productImages1},
                    {"path":json.productImages2},
                    {"path":json.productImages3},
                    {"path":json.productImages4},
                    {"path":json.productImages5}
                ];
                var imgSum=imgArr.length;
                if(imgSum>5){
                    imgSum=5;
                }
                for (var i=0;i<imgSum;i++) {
                    var lis=document.createElement('li');
                    var imgs=document.createElement('img');
                    imgs.src=imgArr[i].path;
                    lis.appendChild(imgs);
                    smaller.appendChild(lis);
                }
                var mainImg=document.createElement('img');
                var bigImg=document.createElement('img');
                var liArr=smaller.children;
                bigImg.src=mainImg.src=liArr[0].children[0].src;
                main.insertBefore(mainImg,mask);
                biger.appendChild(bigImg);
                var bigPic=biger.children[0];
                liArr[0].className='current';
                for (var i=0;i<liArr.length;i++) {
                    liArr[i].index=i;
                    liArr[i].onclick=function(){
                        this.className='current';
                        bigPic.src=main.children[0].src=this.children[0].src;
                        for (var j = 0; j < liArr.length; j++) {
                            if(this!=liArr[j]){
                                liArr[j].removeAttribute('class');
                                liArr[j].removeAttribute('className');
                            }
                        }
                    }
                }
                main.onmouseenter=function(){
                    mask.style.display='block';
                    biger.style.display='block';
                }
                main.onmouseleave=function(){
                    mask.style.display='none';
                    biger.style.display='none';
                }
                main.onmousemove=function(e){
                    var e = e || window.event;
                    var pagex=e.pageX || scroll().left+e.clientX;
                    var pagey=e.pageY || scroll().top+e.clientY;
                    pagex=pagex-wrap.offsetLeft-mask.offsetWidth/2;;
                    pagey=pagey-wrap.offsetTop-mask.offsetHeight/2;
                    if(pagex<0){
                        pagex=0;
                    }
                    if(pagey<0){
                        pagey=0;
                    }
                    if(pagex>main.offsetWidth-mask.offsetWidth){
                        pagex=main.offsetWidth-mask.offsetWidth;
                    }
                    if(pagey>main.offsetHeight-mask.offsetHeight){
                        pagey=main.offsetHeight-mask.offsetHeight;
                    }
                    mask.style.left=pagex+'px';
                    mask.style.top=pagey+'px';
                    var scale=(bigPic.offsetWidth-biger.offsetWidth)/(main.offsetWidth-mask.offsetWidth);
                    var xx=pagex*scale;
                    var yy=pagey*scale;
                    bigPic.style.left=-xx+'px';
                    bigPic.style.top=-yy+'px';
                }
            }});
    })
</script>